<template>
  <div>
    <div class="flex">
      <div class="left">
        <div class="top" @click="goAdd(true)">
          <span class="line" />
          场景序列
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="mini"
          >新增</el-button>
        </div>
        <div class="list">
          <div v-for="(item, index) in list" :key="index">
            <div class="mb-10">
              {{ item.nodeName }}
              <span style="float: right">
                <i
                  class="el-icon-circle-plus-outline cur"
                  @click="goAdd(false, item)"
                />
                <i
                  class="el-icon-edit inline ml-5 cur"
                  @click="goEdit(true, item, true)"
                />
                <i
                  class="el-icon-delete inline ml-5 cur"
                  @click="goDelete(item, index, true)"
                />
              </span>
              <div class="ml-15 mt-10">
                <div
                  v-for="(item2, index2) in item.sceneChildNodeManagerList"
                  :key="index2"
                  class="mt-10"
                >
                  <span
                    class="cur"
                    :style="{ color: indexSe == item2.id ? '#409EFF' : '' }"
                    @click="displayNode(item2, index2, index)"
                  >
                    {{ item2.childNodeName }}
                  </span>
                  <span style="float: right">
                    <i
                      class="el-icon-edit inline ml-5 cur"
                      @click="goEdit(false, item2, true)"
                    />
                    <i
                      class="el-icon-delete inline ml-5 cur"
                      @click="goDelete(item2, index2, false)"
                    />
                    <i
                      class="el-icon-setting inline ml-5 cur"
                      @click="displayNode(item2, index2, index)"
                    />
                  </span>
                </div>
              </div>
            </div>
            <div />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <el-radio-group v-model="form.labelPosition" size="small">
            <el-radio-button label="left">节点内容配置</el-radio-button>
          </el-radio-group>
        </div>
        <div class="pl-20">
          <el-form>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="场景名称">
                  <el-input v-model="scenceInfo.sceneName" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="场景描述">
                  <el-input v-model="scenceInfo.sceneDesc" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div
          v-if="list[first] && list[first].sceneChildNodeManagerList[second]"
          class="pl-20"
        >
          <h3>
            {{ list[first].sceneChildNodeManagerList[second].childNodeName }}
          </h3>
          <div>
            <div class="title">
              <span class="high" />
              配置内容1
            </div>
            <el-form class="bor p-20">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="节点名称">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second]
                          .childNodeName
                      "
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="节点类型">
                    <el-select
                      v-model="
                        list[first].sceneChildNodeManagerList[second].nodeType
                      "
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in dict"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="执行内容">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second].remark
                      "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="执行次数">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second].nodeData
                      "
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="mt-20">
            <div class="title">
              <span class="high" />
              配置内容2
            </div>
            <el-form class="bor p-20">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item
                    :label="
                      list[first].sceneChildNodeManagerList[second]
                        .optionType == 1
                        ? '设备列表'
                        : '仪器列表'
                    "
                  >
                    <!-- <el-input v-model="info.nodeName" /> -->
                    <el-select
                      v-if="
                        list[first].sceneChildNodeManagerList[second]
                          .optionType != 1
                      "
                      v-model="
                        list[first].sceneChildNodeManagerList[second]
                          .instrumentId
                      "
                      placeholder="请选择"
                      style="width: 100%"
                      @change="getOrderMachine"
                    >
                      <el-option
                        v-for="item in machinelist"
                        :label="item.instrumentName"
                        :value="item.instrumentId"
                      />
                    </el-select>
                    <el-select
                      v-else
                      v-model="
                        list[first].sceneChildNodeManagerList[second].deviceId
                      "
                      placeholder="请选择"
                      style="width: 100%"
                      @change="getOrder"
                    >
                      <el-option
                        v-for="item in devicelist"
                        :label="item.deviceName"
                        :value="item.deviceId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="指令">
                    <el-select
                      v-model="
                        list[first].sceneChildNodeManagerList[second].comdId
                      "
                      placeholder="请选择"
                      style="width: 100%"
                      @change="orderMethod"
                    >
                      <el-option
                        v-for="item in order"
                        :key="item.comdId"
                        :label="item.comdName"
                        :value="item.comdId"
                      />
                    </el-select>
                    <!-- <el-input v-model="info.remark" /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="指令描述">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second].comdDesc
                      "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="指令代号">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second].comdCode
                      "
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button
                class="btn-active"
                icon="el-icon-plus"
                size="mini"
                style="background: none;margin-bottom: 30px;"
                @click="addParams"
              >新增参数配置</el-button>
              <el-table :data="paramsTabledata" style="margin-bottom: 20px;" border>
                <el-table-column label="参数名称">
                  <template slot-scope="scope">
                    {{ scope.row.parmName }}
                  </template>
                </el-table-column>
                <el-table-column label="参数值">
                  <template slot-scope="scope">
                    {{ scope.row.parmData }}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      icon="el-icon-remove"
                      type="primary"
                      size="mini"
                      @click="delRow(scope.$index)"
                    >删除</el-button>
                  </template>

                </el-table-column>
              </el-table>
              <!-- <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="指令值">
                    <el-input
                      v-model="
                        list[first].sceneChildNodeManagerList[second].comdData
                      "
                      placeholder="请设置"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="关联判读指令参数列表">
                    <el-select
                      v-model="
                        list[first].sceneChildNodeManagerList[second].parmId
                      "
                      placeholder="请选择"
                      multiple
                      style="width: 100%"
                      @change="trans"
                    >
                      <el-option
                        v-for="item in judgeList"
                        :label="item.parmName"
                        :value="item.parmId"
                      />
                    </el-select>
              </el-form-item>
              </el-col>
              </el-row> -->
            </el-form>

          </div>
          <div class="mt-20">
            <div class="title">
              <span class="high" />
              配置内容3
            </div>
            <judge :list2="transInfo" :info="info" @data="getData" />
          </div>
        </div>
        <div
          v-if="list[first] && list[first].sceneChildNodeManagerList[second]"
          class="center"
          style="padding-bottom: 100px; margin-top: 20px"
        >
          <el-button
            class="confirm"
            type="primary"
            @click="submitFinal"
          >提交</el-button>
          <el-button class="cancel" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增参数配置"
      :visible.sync="paramsVisible"
      width="600px"
      :modal="false"
    >
      <el-form>
        <el-form-item label="参数" labelWidth="80px">
          <el-select
            v-model="paramsForm.parmId"
            placeholder="请选择"
            style="width: 250px"
            @change="getParams"
          >
            <el-option v-for="item in paramsList" :key="item.parmId" :label="item.parmName" :value="item.parmId" />
          </el-select>
        </el-form-item>
        <el-form-item label="参数值"  labelWidth="80px">
          <el-input v-model="paramsForm.parmData" style="width: 250px;" />
        </el-form-item>
      </el-form>
      <div class="center">
        <el-button
          class="confirm"
          type="primary"
          @click="submitParams"
        >提交</el-button>
        <el-button
          class="cancel"
          @click="paramsVisible = false"
        >返回</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="nodeForm.id ? '编辑节点' : '新增节点'"
      :visible.sync="dialogFormVisible"
      width="600px"
      :modal="false"
    >
      <el-form>
        <el-form-item v-if="flag" label="节点名称">
          <el-input
            v-model="nodeForm.nodeName"
            placeholder="请输入"
            style="width: 250px"
          />
        </el-form-item>
        <div v-if="!flag">
          <el-form-item label="节点名称">
            <el-input
              v-model="nodeForm.childNodeName"
              placeholder="请输入"
              style="width: 250px"
            />
          </el-form-item>
          <el-form-item label="操作类型">
            <el-select
              v-model="nodeForm.optionType"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option label="设备" value="1" />
              <el-option label="仪器" value="2" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div v-if="!isEdit" class="center">
        <el-button
          class="confirm"
          type="primary"
          @click="submitNode"
        >提交</el-button>
        <el-button
          class="cancel"
          @click="dialogFormVisible = false"
        >返回</el-button>
      </div>
      <div v-else class="center">
        <el-button
          class="confirm"
          type="primary"
          @click="editNode"
        >提交</el-button>
        <el-button
          class="cancel"
          @click="dialogFormVisible = false"
        >返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import judge from './judge'
import { getOperateTypeList, getOperateDataByType } from '@/api/dict'
import {
  getDeviceList,
  getMachineList,
  getComdListByDeviceIdOrInstrumentId
} from '@/api/table'
import {
  addScene,
  editScene,
  orderList,
  getParmListByDeviceIdOrInstrumentId,
  getParmByComdList,
  getParmByDeviceAndInstrument,
  getSceneDecs,
  sceneParentNodeManagerremove
} from '@/api/form'
export default {
  name: 'AddScene',
  components: {
    judge
  },

  data() {
    return {
      scenceInfo: {},
      paramsTabledata: [],
      paramsList: [],
      paramsForm: {},
      form: { labelPosition: 'left' },
      dialogJudgeVisible: false,
      nodeForm: {},
      options: [],
      first: 0,
      second: 0,
      dialogFormVisible: false,
      paramsVisible: false,
      list: [],
      flag: false,
      info: {},
      indexSe: 0,
      optionType: '',
      params: {},
      devicelist: [],
      machinelist: [],
      isEdit: false,
      dict: [],
      order: [],
      judgeList: [],
      transInfo: [],
      final: {}
    }
  },
  async mounted() {
    const resM = await getMachineList({
      pageSize: 1000,
      pageNum: 1
    })
    this.machinelist = resM.rows

    const resD = await getDeviceList({
      pageSize: 1000,
      pageNum: 1
    })
    resD.rows.forEach((element) => {
      element.deviceId = Number(element.deviceId)
    })
    this.devicelist = resD.rows
    if (this.$route.query.id) {
      const resInfo = await getSceneDecs({ sceneId: this.$route.query.id })
      console.log(resInfo, '000')
      this.scenceInfo = resInfo.data
      
      resInfo.data.sceneParentNodeManagerList.forEach((element, index) => {
        if (element.sceneChildNodeManagerList) {
          element.sceneChildNodeManagerList.forEach((child) => {
            child.optionType = child.deviceId ? 1 : 2
            child.id = child.childNodeId
            console.log(child.sceneChildNodeInfoList, 89)
            if (child.sceneChildNodeInfoList) {
              child.parmId = child.sceneChildNodeInfoList.map(
                (item) => item.parmId
              )
            }
          })
        }
      })

      // this.list[this.first].sceneChildNodeManagerList[this.second].parmId = []
      if (resInfo.data.sceneParentNodeManagerList[0]?.sceneChildNodeManagerList) {
        this.indexSe = resInfo.data.sceneParentNodeManagerList[0]?.sceneChildNodeManagerList[0]?.id
        this.info = resInfo.data.sceneParentNodeManagerList[0]?.sceneChildNodeManagerList[0]
        this.paramsTabledata = resInfo.data.sceneParentNodeManagerList[0]?.sceneChildNodeManagerList[0]?.sceneChildNodeInfoList || []
      }
      
      console.log(this.indexSe)
      
      console.log(this.info)
      
      if (this.info.instrumentId) {
        this.getOrderMachine(
          this.info.instrumentId,
          true,
          resInfo.data.sceneParentNodeManagerList
        )
      } else if (this.info.deviceId) {
        this.getOrder(
          this.info.deviceId,
          true,
          resInfo.data.sceneParentNodeManagerList
        )
      }

      console.log(this.list, 20)
    }
    getOperateTypeList().then((res) => {
      console.log(res)
      this.options = res.data
    })
    getOperateDataByType().then((res) => {
      console.log(res)
      this.dict = res.data
    })
  },

  methods: {
    delRow(index) {
      console.log(index)
      this.paramsTabledata.splice(index, 1)
    },
    getParams(val) {
      const obj = this.paramsList.filter(item => item.parmId == val)[0]
      this.paramsForm.parmName = obj.parmName
    },
    submitParams() {
      if (!this.paramsTabledata) {
        this.paramsTabledata = []
      }
      this.paramsTabledata.push(this.paramsForm)
      this.list[this.first].sceneChildNodeManagerList[this.second].sceneChildNodeInfoList = this.paramsTabledata
      this.paramsVisible = false
      console.log(this.list[this.first].sceneChildNodeManagerList[this.second].sceneChildNodeInfoList,this.list)
    },
    addParams() {
      this.paramsForm = {}
      this.paramsVisible = true
    },
    displayNode(item, index2, index) {
      this.first = index
      this.second = index2
      console.log(this.list, this.list[this.first])
      if (this.$route.query.id) {
        item.id = item.childNodeId
        this.indexSe = item.childNodeId
      } else {
        this.indexSe = item.id
      }
      this.paramsTabledata = this.list[this.first].sceneChildNodeManagerList[this.second].sceneChildNodeInfoList || []
      this.info = { ...item }
      if (this.paramsTabledata && this.paramsTabledata.length == 0) {
        this.paramsList = []
      }
      if (this.info.instrumentId) { //回显参数
        this.getOrderMachine(
          this.info.instrumentId,
          false,
          1
          // resInfo.data.sceneParentNodeManagerList
        )
      } else if (this.info.deviceId) {
        this.getOrder(
          this.info.deviceId,
          false,
          1
          // resInfo.data.sceneParentNodeManagerList
        )
      }
      console.log(this.info, this.list)
    },
    submitFinal() {
      const arr = []
      this.list.forEach((item) => {
        let data = {
          nodeName: item.nodeName,
          sceneChildNodeManagerList: item.sceneChildNodeManagerList
        }
        if (item.nodeId && this.$route.query.id) {
          data.nodeId = item.nodeId
          data.parentNodeId = item.parentNodeId
        }
        arr.push(data)
      })
      const data = {
        sceneName: this.scenceInfo.sceneName,
        sceneDesc: this.scenceInfo.sceneDesc,
        sceneParentNodeManagerList: arr
      }
      console.log(data)
      // return
      if (this.$route.query.id) {
        data.sceneId = this.$route.query.id
        editScene(data).then((res) => {
          console.log(data)
          if (res.code == 200) {
            this.$message.success('操作成功')
            this.$router.go(-1)
          }
        })
      } else {
        addScene(data).then((res) => {
          console.log(data)
          if (res.code == 200) {
            this.$message.success('操作成功')
            this.$router.go(-1)
          }
        })
      }
    },
    getData(val) {
      console.log(val.info)
      this.list.forEach((parent) => {
        parent.sceneChildNodeManagerList.forEach((element) => {
          if (element.id == val.info.id) {
            element.sceneInterpretationParmsList = val.data
            // this.info.sceneChildNodeManagerList[0].sceneInterpretationParmsList = val.data
          }
        })
      })
      // this.info.sceneInterpretationParmsList = val.data;
    },
    orderMethod(val) {
      const data = this.order.filter((item) => item.comdId == val)[0]
      // const obj = { comdDesc: data.comdDesc, comdCode: data.comdCode }
      // if (data.comdData == null) {
      //   data.comdData = ''
      // }
      this.list[this.first].sceneChildNodeManagerList[this.second].comdDesc = data.comdDesc
      this.list[this.first].sceneChildNodeManagerList[this.second].comdCode = data.comdCode
      // console.log(obj, this.info)
      // this.info = Object.assign(this.info, data)
      // this.list.forEach((parent) => {
      //   parent.sceneChildNodeManagerList.forEach((element) => {
      //     if (
      //       element.childNodeId == this.info.childNodeId &&
      //       element.childNodeId
      //     ) {
      //       // const info = JSON.parse(JSON.stringify(this.info))
      //       // this.info = Object.assign(info, data)
      //       // this.info = { ...info, ...data }
      //       // Object.assign(element, obj)
      //       // element = { ...element, ...data }
      //       // element.comdId = data.comdId
      //       // element.comdDesc = data.comdDesc
      //       // this.$set()
      //       console.log(element, 99)
      //     } else if (element.id == this.info.id && element.id) {
      //       // Object.assign(element, obj)
      //       element = { ...element, ...obj }
      //       console.log(element, 99)
      //     }
      //   })
      // })

      console.log(this.list, 7)
      getParmByComdList({ comdId: val }).then((res) => {
        console.log(res)
        this.list[this.first].sceneChildNodeManagerList[this.second].parmId = ''
        this.judgeList = res.rows
      })
    },
    trans(val) {
      const arr = []
      this.judgeList.forEach((item) => {
        val.forEach((element) => {
          if (item.parmId == element) {
            arr.push(item)
          }
        })
      })
      this.list.forEach((parent) => {
        parent.sceneChildNodeManagerList.forEach((element) => {
          if (element.childNodeId == this.info.childNodeId) {
            // element.sceneChildNodeInfoList = arr
            // this.info = Object.assign(info, data)
            // this.info = {...info, ...data}
            // Object.assign(element, this.info)
            // element = {...element, ...data}
            console.log(element, 99)
          }
        })
      })
      // this.info.sceneChildNodeInfoList = [this.judgeList.filter(item => item.parmId == val)[0]]
      console.log(this.list)
    },
    getOrder(val, flag, list) {
      console.log(this.devicelist, val)

      const code = this.devicelist.filter((item) => item.deviceId == val)[0].dictCode
      getComdListByDeviceIdOrInstrumentId({ deviceId: val }).then((res) => {
        console.log(res)
        this.order = res.data
        if (!flag && list != 1) {
          // this.info.comdId = ''
          console.log(this.list[this.first].sceneChildNodeManagerList[this.second].comdId)
          if (this.list[this.first].sceneChildNodeManagerList[this.second].comdId != undefined) {
            this.list[this.first].sceneChildNodeManagerList[this.second].comdId = ''
            this.list[this.first].sceneChildNodeManagerList[this.second].comdCode = ''
            this.list[this.first].sceneChildNodeManagerList[this.second].comdDesc = ''
          }
        } else {
          if (list!=1)  this.list = list
        }
      })
      getParmListByDeviceIdOrInstrumentId({ deviceId: val }).then((res) => {
        console.log(res)
        this.paramsList = res.data
      })
      getParmByDeviceAndInstrument({ deviceId: val }).then((res) => {
        console.log(res)

        this.transInfo = res.rows
      })
      // this.transInfo = this.judgeList.filter((item) => item.parmId == val)[0]
    },
    getOrderMachine(val, flag, list) {
      console.log(this.machinelist, val)

      const code = this.machinelist.filter(
        (item) => item.instrumentId == val
      )[0].dictCode
      getComdListByDeviceIdOrInstrumentId({ instrumentId: val }).then((res) => {
        this.order = res.data

        if (!flag && list != 1) {
          this.info.comdId = ''
          this.list[this.first].sceneChildNodeManagerList[this.second].comdId =
            ''
          this.list[this.first].sceneChildNodeManagerList[
            this.second
          ].comdCode = ''
          this.list[this.first].sceneChildNodeManagerList[
            this.second
          ].comdDesc = ''
        } else {
          getParmByComdList({
            comdId: list[0].sceneChildNodeManagerList[0].comdId
          }).then((res2) => {
            // 初始化
            this.judgeList = res2.rows
          })
          if (list!=1)  this.list = list
         
        }
      })
      getParmListByDeviceIdOrInstrumentId({ instrumentId: val }).then((res) => {
        console.log(res)
        this.paramsList = res.data
      })
      getParmByDeviceAndInstrument({ instrumentId: val }).then((res) => {
        console.log(res)
        this.transInfo = res.rows
      })
      // this.transInfo = this.judgeList.filter((item) => item.parmId == val)[0]
    },
    submitNode() {
      if (this.flag) {
        // 一级
        this.list.push({
          nodeName: this.nodeForm.nodeName,
          id: Math.random(),
          sceneChildNodeManagerList: []
        })
      } else {
        this.list.forEach((item) => {
          if (!item.sceneChildNodeManagerList) {
            item.sceneChildNodeManagerList = []
          }
          if (this.$route.query.id) {
            if (this.params.nodeId == item.nodeId) {
              item.sceneChildNodeManagerList.push({
                ...JSON.parse(JSON.stringify(this.nodeForm)),
                id: Math.random()
              })
            }
          } else {
            if (this.params.id == item.id) {
              item.sceneChildNodeManagerList.push({
                ...JSON.parse(JSON.stringify(this.nodeForm)),
                id: Math.random()
              })
            }
          }
          
        })
        this.indexSe = this.list[0].sceneChildNodeManagerList[0].id
        this.info = this.list[0].sceneChildNodeManagerList[0]
      }

      console.log(this.list)
      // addScene(this.nodeForm).then(res => {
      this.dialogFormVisible = false
      // })
    },
    editNode() {
      if (this.flag) {
        this.list.forEach((item) => {
          if (this.params.id == item.id) {
            item.nodeName = this.nodeForm.nodeName
          }
        })
      } else {
        // 二级
        this.list.forEach((item) => {
          item.sceneChildNodeManagerList.forEach((child) => {
            if (this.params.id == child.id) {
              child = JSON.parse(JSON.stringify(this.nodeForm))
            }
          })
        })
      }
      this.dialogFormVisible = false
    },

    goEdit(flag, item, isEdit) {
      this.flag = flag

      this.nodeForm = item
      this.params = item
      this.isEdit = isEdit
      this.info.optionType = this.optionType
      this.dialogFormVisible = true
    },
    goAdd(flag, item) {
      console.log(item)
      this.nodeForm = {}
      this.isEdit = false
      this.flag = flag
      this.params = item
      this.dialogFormVisible = true
      console.log(this.flag)
    },
    goDelete(item, index, flag) {
      if (flag) {
        
        sceneParentNodeManagerremove({ids: item.parentNodeId}).then(res => {
          if (res.code == 200) {
            this.list.splice(index, 1)
          }
        })
      } else {
        const arr = JSON.parse(JSON.stringify(this.list))
        arr.forEach((listc) => {
          listc.sceneChildNodeManagerList.forEach((childItem) => {
            if (item.id == childItem.id) {
              console.log(index)
              //   child = this.nodeForm;
              listc.sceneChildNodeManagerList.splice(index, 1)
            }
          })
        })
        setTimeout(() => {
          this.list = arr
        }, 500)

        console.log(arr)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mb-10 {
  margin-bottom: 10px;
}
::v-deep {
  .el-form-item {
    margin-bottom: 10px;
  }
}
.app-container {
  padding-bottom: 20px;
}
.p-20 {
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
}
::v-deep {
  .el-form-item__label {
    color: white;
  }
}
.top {
  height: 40px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-left: 20px;
  text-align: left;
  color: white;
  background: rgba(17, 91, 122, 0.5);
  line-height: 40px;
  .el-button {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.pl-20 {
  padding-left: 20px;
}
h3 {
  color: white;
}
.left {
  overflow: auto;
  width: 20%;
  min-width: 200px;
  min-height: 100vh;
  border-right: 1px solid rgb(26, 102, 133);
}
.right {
  flex: 1;
  // padding-left: 20px;
}
.part {
  height: 52px;
  margin-bottom: 20px;
  background: rgba(26, 57, 78, 0.6);
  .el-form {
    margin-top: 8px;
  }
}
.bor {
  border: 0.5px solid rgb(1, 190, 249);
}
.title {
  width: 120px;
  height: 32px;
  margin-left: 0;
  padding-left: 20px;
  color: white;
  background: url("../../assets/img/highlight.svg");
  background-size: 100% 100%;
  font-size: 14px;
  line-height: 32px;
}
.list {
  margin-right: 20px;
  margin-left: 20px;
  color: white;
}
</style>
